<template>
	<view :class="['cu-modal', {show:popShow}]" @click="hidePop">
		<view class="cu-dialog" @click.stop="" v-if="popData">
			<view class="flex padding">
				<view class="flex align-center">
					<image class="poster margin-right" :src="popData.img" mode=""></image>
				</view>
				<view class="text-left info list">
					{{popData.name}}
					<view class="margin-tb-sm">
						{{popData.french}}
					</view>
					{{popData.list[dropIdx].price}}
					<view class="margin-top-sm">
						{{popData.list[dropIdx].fittings}}
					</view>
				</view>
			</view>
			<view class="flex justify-between padding u-border-top">
				<view class="">
					规格选择
				</view>
				<view class="sku-list padding-lr" @click="dropShow=true">
					{{popData.list[dropIdx].spec}}
					-
					{{popData.list[dropIdx].weight}}
					-
					{{popData.list[dropIdx].edible}}
					<view class="drop-cont text-sm" v-if="dropShow">
						<view 
							class="padding" 
							v-for="(item,index) in popData.list"
							@click.stop="handleDrop(index)"
						>
							{{item.spec}}
							-
							{{item.weight}}
							-
							{{item.edible}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding u-border-top align-center">
				<view class="">
					数量选择
				</view>
				<uni-number-box v-model="num" :min="1"></uni-number-box>
			</view>
			<view class="flex btn-cont text-center">
				<view class="padding bg-yellow" @click="hidePop">
					取消
				</view>
				<view class="padding bg-brown" @click="cartAdd">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import {useStore} from 'vuex'
const store = useStore()
const popShow = computed(()=>{
	return store.state.cart.popShow
})
const hidePop = ()=>{
	store.commit('cart/togglePopShow',false)
	dropIdx.value = 0
}

// 弹窗数据渲染
const popData = computed(()=>{
	return store.state.cart.popData
})

//规格控制
const dropIdx = ref(0)
const dropShow = ref(false)
const handleDrop = (idx)=>{
	dropShow.value = false
	dropIdx.value = idx
}
const editIdx = computed(()=>store.state.cart.editIdx)

watch(editIdx,()=>{
	if(editIdx.value==-1){
		dropIdx.value = 0
	}else{
		dropIdx.value = editIdx.value
	}
	dropShow.value = false
	console.log('editIdx',editIdx);
})

// 数量控制
const num = ref(1)

// 确定(新增、编辑)
const cartAdd = ()=>{
	let cakeObj = {...popData.value}
	store.commit('cart/cartAddMut',{
		...cakeObj,
		num:num.value,
		dropIdx:dropIdx.value, //记录规格
		isCheck:true
	})
	hidePop()
}
</script>

<style lang="scss">
.btn-cont view{
	width: 50%;
}
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.sku-list{
	position: relative;
}
.drop-cont{
	position: absolute;
	top: 65upx;
	right: 0;
	background-color: #fff;
	box-shadow: 0 0 20upx 5upx rgba(0,0,0,0.3);
	z-index: 1;
}
.cu-dialog{
	overflow: visible;
}
</style>